<script setup lang="ts">
  const activeNames = ref(['1'])
  const test = ref('合作方基本信息')
  const partnerInfo = ref([
    {
      partnerBasicTitle: '合作方基本信息',
      partnerBasicList: [
        {
          title: '拓展信息',
          list: [
            { label: '所属机构', value: '1' },
            { label: '拓展机构', value: '2' },
            { label: '拓展成员', value: '3' },
            { label: '上级合作方', value: '4' },
          ],
        },
        {
          title: '基本信息',
          list: [
            { label: '合作方归属地', value: '1' },
            { label: '合作方类型', value: '2' },
            { label: '合作方名称', value: '3' },
            { label: '合作方英文名称', value: '4' },
            { label: '商业登记证(BR)编号', value: '5' },
            { label: '商业登记证(BR)有效期', value: '6' },
            { label: '企业注册证书(CR)编号', value: '7' },
            { label: '企业注册证书(CR)有效期', value: '8' },
            { label: '详细地址', value: '9' },
            { label: '联系电话', value: '10' },
            { label: '联系邮箱', value: '11' },
            { label: '合同有效期', value: '12' },
          ],
        },
        {
          title: '董事信息',
          list: [
            { label: '董事国籍', value: '1' },
            { label: '董事姓名', value: '2' },
            { label: '董事英文名称', value: '3' },
            { label: '董事性别', value: '4' },
            { label: '证件类型', value: '5' },
            { label: '董事证件号码', value: '6' },
            { label: '董事证件有效期', value: '7' },
            { label: '联系电话', value: '8' },
            { label: '联系邮箱', value: '9' },
          ],
        },
        {
          title: '股权架构',
          list: [
            { label: '董事国籍', value: '1' },
            { label: '董事姓名', value: '2' },
            { label: '董事英文名称', value: '3' },
            { label: '董事性别', value: '4' },
            { label: '证件类型', value: '5' },
            { label: '董事证件号码', value: '6' },
            { label: '董事证件有效期', value: '7' },
          ],
        },
        { title: '附件材料', list: [] },
      ],
    },
    {
      partnerBasicTitle: '账户信息',
      partnerBasicList: [
        {
          title: '账户信息',
          list: [
            { label: '结算周期', value: '1' },
            { label: '计算币种', value: '2' },
            { label: '银行账户所在地', value: '3' },
            { label: '银行账户名称', value: '4' },
            { label: '银行账号', value: '5' },
            { label: 'SWIFT CODE', value: '6' },
            { label: '银行名称', value: '7' },
            { label: '银行编码', value: '8' },
            { label: '开户银行地址', value: '9' },
          ],
        },
      ],
    },
    {
      partnerBasicTitle: '汇率信息',
      partnerBasicList: [
        {
          title: '分润配置',
          list: [
            { label: '结算周期', value: '1' },
            { label: '计算币种', value: '2' },
            { label: '银行账户所在地', value: '3' },
            { label: '银行账户名称', value: '4' },
            { label: '银行账号', value: '5' },
            { label: 'SWIFT CODE', value: '6' },
            { label: '银行名称', value: '7' },
            { label: '银行编码', value: '8' },
            { label: '开户银行地址', value: '9' },
          ],
        },
        {
          title: '产品信息',
          list: [{ label: '', value: '' }],
        },
      ],
    },
    {
      partnerBasicTitle: '附件',
      partnerBasicList: [
        {
          title: '附件',
          list: [{ label: '', value: '' }],
        },
      ],
    },
  ])
</script>

<template>
  <div class="app-container">
    <div class="app-container-inner">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          :name="(index + 1).toString()"
          v-for="(item, index) in partnerInfo"
          :key="item.partnerBasicTitle"
        >
          <template #title>
            {{ item.partnerBasicTitle
            }}<el-icon class="header-icon">
              <info-filled />
            </el-icon>
          </template>
          <el-descriptions
            :title="subItem.title"
            v-for="subItem in item.partnerBasicList"
            :key="subItem.title"
            border
            :column="6"
          >
            <el-descriptions-item
              :label="grandsonItem.label"
              v-for="grandsonItem in subItem.list"
              :key="grandsonItem.label"
              label-align="right"
              >unKonwn date</el-descriptions-item
            >
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<style scoped>
  :deep(.el-descriptions__title) {
    color: var(--el-text-color-primary);
    font-size: 14px;
    font-weight: 600;
  }
  :deep(.el-descriptions) {
    margin-bottom: 8px;
  }
  :deep(.el-descriptions__header) {
    margin-bottom: 8px;
  }
  :deep(.el-collapse-item__header) {
    font-weight: 700 ;
     --el-collapse-header-font-size: 15px;
  }
</style>
